<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="优惠券列表"
      row-key="id"
      :columns="columns"
      :request-api="getDesignPageList"
      :tool-button="false"
    >
      <!-- 表格 header 按钮 -->
      <!-- <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="openDialog('新增', defaultData)"> 新增页面设计 </el-button>
      </template> -->
      <!-- 表格操作 -->
      <template #operation="scope">
        <!-- <el-button type="primary" link :icon="EditPen" @click="openDialog('编辑', scope.row)"> 编辑 </el-button> -->
        <el-button type="primary" link :icon="Edit" @click="toDetail(scope.row)"> 版面设计 </el-button>
        <!-- <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"> 删除 </el-button> -->
      </template>
    </ProTable>
    <!-- <DesignPageDialog ref="dialogRef" /> -->
  </div>
</template>

<script setup lang="tsx" name="designPage">
import { ref, onBeforeUpdate } from "vue";
import { System } from "@/api/interface";
import { useRouter, useRoute } from "vue-router";
// import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
// import DesignPageDialog from "@/views/system/components/DesignPageDialog.vue";
import { Edit } from "@element-plus/icons-vue";
// CirclePlus, Delete, EditPen,
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import { getDesignPageList } from "@/api/modules/system";
// createDesignPage, editDesignPage, deleteDesignPage
import { designPageType } from "@/utils/serviceDict";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();
// const defaultData = reactive({
//   code: "",
//   name: "",
//   description: "",
//   type: 1,
//   status: true
// });

// 表格配置项
const columns: ColumnProps<System.DesignPageList>[] = [
  { type: "index", label: "#", width: 60 },
  { prop: "code", sortable: true, label: "可视化区域编码", align: "left", minWidth: 100 },
  { prop: "name", sortable: true, label: "可编辑区域名称", align: "left", minWidth: 100 },
  { prop: "description", sortable: true, label: "描述", align: "left", minWidth: 164 },
  {
    prop: "type",
    label: "模板类型",
    align: "left",
    minWidth: 100,
    sortable: true,
    enum: designPageType
  },
  // {
  //   prop: "status",
  //   label: "是否启用",
  //   align: "left",
  //   minWidth: 100,
  //   enum: generalStatus2
  // },
  { prop: "operation", label: "操作", width: 120, fixed: "right" }
];

// 跳转详情页面
const router = useRouter();
const route = useRoute();
const toDetail = (params?: System.DesignPageList) => {
  router.push({
    path: "/system/design-page/detail",
    query: {
      id: params.id,
      pageCode: params.code
    }
  });
};

// 打开 drawer(新增、查看、编辑)
// const dialogRef = ref<InstanceType<typeof DesignPageDialog> | null>(null);
// const openDialog = (title: string, row: Partial<System.DesignPageList> = {}) => {
//   const params = {
//     title,
//     isView: title === "查看",
//     row: { ...row },
//     api: title === "新增" ? createDesignPage : title === "编辑" ? editDesignPage : undefined,
//     getTableList: proTable.value?.getTableList
//   };
//   dialogRef.value?.acceptParams(params);
// };

// 删除
// const deleteAccount = async (params: System.DesignPageList) => {
//   await useHandleData(deleteDesignPage, { id: params.id }, `删除【${params.name}】页面模板`);
//   proTable.value?.getTableList();
// };
onBeforeUpdate(() => {
  if (route.query.upList) {
    proTable.value?.getTableList();
  }
});
</script>
